import React from "react";
import { useDispatch, useSelector } from "react-redux";
import ListItem from "../../components/list-item";
import { Checkbox, Stepper } from "react-vant";

const Car = () => {
  const carList = useSelector((state) => state.carList);
  const dispatch = useDispatch();
  return (
    <div>
      {carList.map((v, i) => {
        return (
          <ListItem
            key={i}
            v={v}
            prevLeft={
              <Checkbox
                checked={v.state}
                onChange={() => dispatch({ type: "switchState", payload: v })}
              ></Checkbox>
            }
            count={
              <Stepper
                value={v.count}
                onPlus={() => dispatch({ type: "addToCar", payload: v })}
                onMinus={() => dispatch({ type: "subToCar", payload: v })}
              ></Stepper>
            }
          ></ListItem>
        );
      })}
    </div>
  );
};

export default Car;
